let $dlg = (function(){
  let fontHtml = `<div class="dlg-box dlg-font">
  <div class="titlebar">
    <p class="title">字体</p>
    <span class="close-btn">×</span>
  </div>
  <div class="main">
    <div class="font-family"></div>
    <div class="font-style"></div>
    <div class="font-size"></div>
    <fieldset class="example">
      <legend>示例</legend>
      <p class="abyz">AaBbYyZz</p>
    </fieldset>
    <div class="root">
      <label>脚本(R):</label><br> 
      <select id="" name="">
        <option value="">中文 GB2312</option>
        <option value="">西欧语言</option>
        <option value="">希腊语</option>
        <option value="">土耳其语</option>
        <option value="">西欧字符</option>
        <option value="">西里尔文</option>
      </select>
    </div>
    <a href="http://www.baidu.com" class="moreFont"><u>显示更多字体</u></a>
    <div class="font-btn">
      <button>确定</button>
      <button class="font-cancel">取消</button>
    </div>
  </div>
</div>`;

  let $body = $('body');
  let fonts = ['Agency FB', 'Algerian', 'Arial', 'Arial Rounded MT', 'Axure Handwriting', 'Bahnschrift', 'Baskerville Old Face', 'Bauhaus 93', 'Bell MT', 'Berlin Sans FB', 'Bernard MT', 'BlackAdder ITC'],
      styles = ['常规', '斜体', '粗体', '粗斜体'],
      styles2 = ['normal', 'italic', 'bolder'],
      sizes = ['8', '10', '12', '14', '16', '18', '20', '22', '24', '26', '28', '36', '48', '72'];
      
  let active = -1;
  function setList(items, title, key){
    let $abyz = $('.abyz'); 
    let $bar = $('<div></div>');
    let $label = $('<label></label>');
    let $input = $('<input type="text" class="font"/>')
    $label.html(title);
    let $list = $('<ul class="list"></ul>');
    $bar.append($label, $input, $list);
    items.map((item,i)=>{
      let $item = $('<li></li>');
      $item.attr('data-id', i);
      $item.html(item);
      $list.append($item);
      $item.click(()=>{ 
        $item.css({'background' : 'red'});
        $input.attr('value', item);
        if(key === 'fontFamily'){
          console.log(key);
          $abyz.css({fontFamily: fonts[i]});
        }else if(key === 'fontStyle'){
          i === 3 
          ? $abyz.css({fontStyle: 'italic', fontWeight: 'bold'})
          : i===2
            ? $abyz.css({fontWeight: styles2[i], fontStyle: 'normal'})
            : $abyz.css({fontStyle: styles2[i], fontWeight: 'normal'})
        }else if(key === 'fontSize'){
          console.log(key);
          $abyz.css({fontSize: sizes[i]+'px'});
        }
        $abyz.css({key: 'italic'});
      })
    })

    return $bar;
  }

  function fontDlg(){
    $body.append(fontHtml);
    let $family = $('.font-family');
    let $style = $('.font-style');
    let $size = $('.font-size');
    $family.append(setList(fonts, '字体', 'fontFamily'));
    $style.append(setList(styles, '字形', 'fontStyle'));
    $size.append(setList(sizes, '字号', 'fontSize'));
    let $font = $('.dlg-font');
    let $close = $('.close-btn'),
        $cancel = $('.font-cancel');
     // 关闭对话框
    $close.click(()=>{
      $font.remove();
    });
    $cancel.click(()=>{
      $font.remove();
    });
  }

  return  {  fontDlg };

})()
